<template>
  <div class="footer-box login-footer">
    <div class="top_box">
        <div v-if="props.footerType === 'login'" class="login-footer">
          <span @click="handleForgetPassword" style="cursor: pointer;">{{ $t('global.ForgetPWD') }}</span>
          <el-divider direction="vertical"/>
          <span @click="handleRegister" style="cursor: pointer;">{{ $t('global.SignUp') }}</span>
          <el-divider direction="vertical"/>
        </div>
        <div v-else-if="props.footerType === 'reg'" class="login-footer">
          <span class="had">{{ $t("global.Had") }}
          <span @click="funHadGoLogin" style="cursor: pointer; color: blue">{{ $t("home.Login") }}</span>
      </span>
        </div>
        <div v-else-if="props.footerType === 'forget'" class="login-footer">
          <span class="goLogin" @click="funGoLogin" style="cursor: pointer">{{ $t('home.Login') }}</span>
        </div>
        <div class="langBox">
          <el-dropdown>
            <span class="el-dropdown-link" v-text="selectedLanguage"></span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleToggleLocale('zh-TW')"> 繁體中文</el-dropdown-item>
                <el-dropdown-item @click="handleToggleLocale('zh-CN')"> 简体中文</el-dropdown-item>
                <el-dropdown-item @click="handleToggleLocale('en-US')"> English</el-dropdown-item>
                <el-dropdown-item @click="handleToggleLocale('ko-KR')"> 한문</el-dropdown-item>
                <el-dropdown-item @click="handleToggleLocale('ja-JP')"> 日本語</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
    </div>
    <p>  2024 BlockWatch</p>
  </div>

  <!--  用户服务协议  -->
  <el-dialog v-model="dialogIsShow" :title="$t('global.Agreement')" width="720" style="height: 7rem" align-center
             center>
    <div class="ProtocolBox">
      <div class="content">
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>
        <p>
          一.感謝您選擇優盾錢包服務。優盾錢包用戶在使用優盾（以下簡稱「優盾」或「本軟件」）之前，請認真閱讀《優盾》及後文提到的相關協議，尤其是本協議規定的「免責及責任限製」等條款將以加粗的形式體現，確保您充分理解本協議中各條款，並自主考慮風險。
        </p>


      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <div class="agreeBox">
          {{ $t('global.AgreementTips') }}
        </div>
        <div class="btns">
          <el-button type="success" @click="funAgree"> {{ $t('global.Agree') }}</el-button>
          <el-button type="warning" @click="dialogIsShow = false"> {{ $t('global.Disagree') }}</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, computed} from 'vue'
import {useRouter} from 'vue-router';
import {useUserStore} from "@/stores";
import {ElMessage} from "element-plus";
import {useI18n} from "vue-i18n";

const {t} = useI18n();
const userStore = useUserStore()
const router = useRouter();
const eye = ref(true)

// 接受父组件的参数
const props = defineProps(['footerType'])

// 显示用户协议
const dialogIsShow = ref(false);
// 忘记密码
const handleForgetPassword = () => {
  router.push('/forget');
}

// 新用户注册
const handleRegister = () => {
  dialogIsShow.value = 'reg';
}

// 已有账号,去登录 方法
const funHadGoLogin = () => {
  router.push("/login");
};

// 同意协议
const funAgree = () => {
  router.push('/register');
}

// 忘记密码 - 去登录方法
async function funGoLogin() {
  router.push({name: 'login'})
}

const selectedLanguage = computed(() => {
  return userStore.getLocale === 'zh-TW' ? '繁體中文' : userStore.getLocale === 'zh-CN' ? '简体中文' : userStore.getLocale === 'ko-KR' ? '한문' : userStore.getLocale === 'ja-JP' ? '日本語' : userStore.getLocale === 'en-US' ? 'English' : '繁體中文'
});

// 切换语言的方法
function handleToggleLocale(value) {
  userStore.setLocale(value)
  window.location.reload();
}
</script>
<style scoped lang="less">
:deep(.el-dropdown-link:focus) {
  outline: none;
}

:deep(.el-dropdown):hover {
  cursor: pointer;
}

/****** 底部“简体中文按钮” ******/
.simpleChinese.is-text:not(.is-disabled):focus-visible {
  outline: none;
}

// 钱包用户服务协议
.dialog-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  :deep(.el-button) {
    margin-top: .3rem;
    height: 45px !important;
    width: 100px !important;
    border-radius: 8px;
  }
}

// 注册用户协议
.ProtocolBox {
  height: 5rem;

  .content {
    height: 100%;
    overflow-y: auto;

    p {
      margin: 1rem 0;
    }
  }

  /* 滚动条整体样式 */

  .content::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #f5f5f5;
  }

  /* 滚动条thumb(滑块)样式 */

  .content::-webkit-scrollbar-thumb {
    width: 5px;
    height: 10px;
    background-color: #9a9a9a;
    border-radius: .5rem;
  }

  /* 滚动条hover状态下thumb(滑块)样式 */

  .content::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }

  /* 滚动条上下箭头样式 */

  .content::-webkit-scrollbar-button {
    background-color: #ccc;
    display: none;
  }

  /* 滚动条左右箭头样式 */

  .content::-webkit-scrollbar-button:start:decrement,
  .content::-webkit-scrollbar-add-button {
    display: none;
  }

  .content::-webkit-scrollbar-button:end:increment,
  .content::-webkit-scrollbar-sub-button {
    display: none;
  }
}
</style>